<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<title>苹果菜单</title>
<style type="text/css">
body {margin:0px;}
#div1 {text-align:center; position:absolute; bottom:0px;  width:800px; margin:0 auto;}
#div1 img {border:none;}
#div1 .box {display:block; width:400px; margin:0 auto; border-bottom:dotted 1px black; text-decoration:none; color:#333;}
#div1 .box:hover {border-bottom:solid 1px black;}

</style>
<script type="text/javascript" >
	onload = function(){
		var imglist = document.getElementsByTagName("img");
		imglist = [].slice.call(imglist);
		
		document.onmousemove = function(evt){
			var e = evt || event;
			var mousex = e.clientX;
			var mousey = e.clientY;
			imglist.forEach(function(item,index){
				var distance = Math.sqrt( 
					Math.pow((mousex - (getPagePosition(item).x + item.offsetWidth/2) ),2) 
					+ 
					Math.pow((mousey - (getPagePosition(item).y + item.offsetHeight/2) ),2)  
				);
				
				//反相关  ： S = 常量N - 变量x;
				var s = Math.max(64, (200 - distance) );
				item.width = s;
			})
		}

		function getPagePosition(obj){
			var _left = 0;
			var _top = 0;
			while(obj.offsetParent){
				_left += obj.offsetLeft;
				_top += obj.offsetTop;
				obj = obj.offsetParent;
			}
			return {x:_left, y:_top};
		}
	}
</script>
</head>

<body>
<div id="div1">
	<a href="#"><img src="images/1.png" width="64"  /></a>
	<a href="#"><img src="images/2.png" width="64"  /></a>
	<a href="#"><img src="images/3.png" width="64"  /></a>
	<a href="#"><img src="images/4.png" width="64"  /></a>
	<a href="#"><img src="images/5.png" width="64"  /></a>
</div>
</body>
</html>
